/**
 * 树模式-左侧的树组件
 */

import React from 'react';
import { Tree } from '@teamix/ui';
import tools from 'utils';
import ListEmpty from 'atComponents/ListEmpty';
// import { getAllFiles } from 'api';
import intl from '../../locale';

const TreeNode = Tree.Node;

const { pathResource } = window.FORCE;

export default class TreeLeft extends React.Component {
  onTreeItemSelect = (selectedKeys, e) => {
    const { isLeaf } = e.node.props;
    // 点击已选中的item
    if (!selectedKeys.length) {
      return false;
    }

    // TODO 如果是文件，则跳转；否则展开子树 aisc不支持？
    if (isLeaf) {
      const path = selectedKeys[0];
      location.hash = `#diff_file_${path}`;
    }
  };

  getTreeData = () => {
    const { diffs } = this.props;
    const data = diffs.map((item) => {
      item.path = `/${item.new_path}`;
      const pathArr = item.path.split('/');
      const { length } = pathArr;
      item.name = pathArr[length - 1];
      if (item.new_file) {
        item.iconType = 'add';
      } else if (item.deleted_file) {
        item.iconType = 'delete';
      } else {
        item.iconType = 'change';
      }

      return item;
    });
    return tools.transferPath2Tree(data, 'iconType');
  };

  // 文件展开
  getExpandKeys = (data) => {
    const keys = ['root'];
    function getKeys(dataTmp) {
      dataTmp.forEach((item) => {
        if (item.type === 'tree') {
          keys.push(item.id);
        }
        if (item.children) {
          getKeys(item.children);
        }
      });
    }
    getKeys(data);
    console.log(keys);
    return keys;
  };

  render() {
    const loop = (data) =>
      data.map((item) => {
        return (
          <TreeNode
            label={
              <span>
                {item.type !== 'commit' ? (
                  <i className={`fa fa-${item.type === 'tree' ? 'folder' : 'file-text-o'}`} />
                ) : (
                  <i className="fa fa-archive" />
                )}{' '}
                {item.name}
              </span>
            }
            key={item.id}
            isLeaf={item.type !== 'tree'}
            resourceType={item.type}
          >
            {item.children && loop(item.children)}
            {item.iconType}
          </TreeNode>
        );
      });

    // const { defaultExpandedKeys, defaultSelectedKeys } = this.props;
    // 请求中
    // if (this.state.isLoading) {
    //   return <div className="filter-loading-data"><Loading /></div>;
    // }

    const treeDataTmp = this.getTreeData();
    if (!treeDataTmp.length) {
      return (
        <div className="filter-no-data">
          <ListEmpty
            content={intl.get({
              id: 'code-assets.components.treeAndDiff.leftTree.NoFileChanges',
              defaultMessage: '没有文件改动',
            })}
            image="none"
          />
        </div>
      );
    }

    return (
      <React.Fragment>
        <Tree
          defaultSelectedKeys={this.getExpandKeys(treeDataTmp)}
          // defaultSelectedKeys={defaultSelectedKeys}
          onSelect={this.onTreeItemSelect}
          onExpand={this.updateExpandKeys}
          className="file-tree"
          mode="directory"
          isLabelBlock
          defaultExpandAll
          style={{ display: 'inline-block', minWidth: '100%' }}
        >
          <TreeNode
            label={pathResource.fullPath.split('/')[pathResource.fullPath.split('/').length - 1]}
            key="root"
          >
            {loop(treeDataTmp)}
          </TreeNode>
        </Tree>
      </React.Fragment>
    );
  }
}
